<script lang="ts" setup>
import avatar from "@/assets/logo.png"
import { useLoginStore } from "@/stores/login.ts"
import { getCurrentInstance } from "vue"

const store = useLoginStore()
const { proxy } = getCurrentInstance()!
const logout = () => {
  // 退出登录
  store.logout()
  proxy?.$message.success("退出成功")
  window.location.reload()
}
</script>

<template>
  <el-dropdown>
    <img :src="avatar" cursor-pointer outline-none rounded-sm size-40px />
    <template #dropdown>
      <el-dropdown-menu>
        <router-link to="/">
          <el-dropdown-item>首页</el-dropdown-item>
        </router-link>
        <router-link to="/profile/index">
          <el-dropdown-item>个人设置</el-dropdown-item>
        </router-link>
        <el-dropdown-item divided @click="logout">
          <span block>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped></style>
